<div class="main-content">
        <!-- Content Header (Page header) -->
        <div class="breadcrumbs" id="breadcrumbs">
        
        	<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
				$(document).ready(function () {
					_init_template('type','template',"","",'<?php echo base_url();?>');
					make_wait_list();
				 });
			</script>
			<ul class="breadcrumb">
				<li>
					<i class="icon-home home-icon"></i>
					<a href="#">系统首页</a>
				</li>
	
				<li>
					<a href="#">信息互动</a>
				</li>
				<li class="active">发送短信</li>
			</ul><!-- .breadcrumb -->
        </div>

		<div class="page-content">
			<!-- /.page-header -->

			<div class="row">
            	<div class="page-header">
				    <h1>发送短信</h1>
			    </div>
                    <div class="col-sm-7">
                    	<div class="margin_t dispose">
                        	<table id="sample-table-1" class="table table-striped table-bordered table-hover note">
								<tr>
                                	<td style="width: 15%;">
                                    	<b>收件人：</b>
                                    </td>
                                    <td>
                                    	<textarea class="width-100 height_100" id="phone" name="phone"></textarea>
                                    </td>
                                    <td>
                                    	<button class="btn width-100 btn-danger" id="del_phone"><i class="icon-trash"></i>清空收件人</button>
                                        <br/>
                                        <button class="btn width-100 btn-info margin_t" id="add_wait"><i class="icon-copy"></i>添加到待发送列表</button>
                                    </td>
                                    <td class="align_l" style="border-right: 1px solid #ddd;">
                                    	<p class="p_cor">
											1 .每行只能输入一个手机号码,为了方便最好是在记事本编辑直接粘贴
                                        </p>
                                        <p class="p_cor">
                                       		 2 .填写完后请点击 添加到待发送列表按钮,将号码添加至发送列表。
                                        </p>
                                        <p class="p_cor">
                                        	3 .每次输入请小于700行。
                                        </p>
                                    </td>
                                </tr>	
                                    <tr>
                                    	<td>
                                        	<b>发送形式：</b>
                                        </td>
                                        <td colspan="5">
                                        	<p class="align_l">
                                            	<label>
                                                    <input  type="radio" checked />短信
                                                </label>
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                    	<td>
                                        	<b>发送类型：</b>
                                        </td>
                                        <td colspan="5" class="align_l">
                                        	<select class="width-50" id="type">
                                            	<option value="">未设置</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                    	<td>
                                        	<b>选择模板：</b>
                                        </td>
                                        <td colspan="5" class="align_l">
                                        	<select class="width-50" id="template">
                                            	<option value="">未设置</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                    	<td>
                                        	<b>短信内容：</b>
                                        </td>
                                        <td colspan="5" class="align_l">
                                        	<textarea class="width-100 height_100" id="content" readonly="readonly"></textarea>
                                            <p class="p_cor">
    											*注解：变量替换标签，验证码--“{{code}}”,姓名--“{{name}}”。
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                    	<td>
                                        	<b>发送方式：</b>
                                        </td>
                                        <td colspan="5">
                                        	<p class="align_l">
                                            	<label>
                                                    <input  type="radio" name="name" checked>立刻发送
                                                </label>
                                                <label>
                                                    <input  type="radio" name="name" >定时发送
                                                </label>
                                            </p>
                                        </td>
                                    </tr>
							 </table>
                             
                             <div class="col-xs-12">
                             		<button class="btn btn-info" onclick="send()"><i class="icon-share-alt"></i>发送</button>
                                    <button class="btn btn-danger" id="del_all"><i class="icon-trash"></i>清空待发送列表</button>
                                    <button class="btn btn-inverse " id="chongzhi" >重置</button>
                             </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                	<div class="margin_t dispose">
                			<div style="text-align: center;">
				                 <h4 style="color:#3f96d4;">待发送列表</h4>
			                 </div>
                        	<table id="wait_tab" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<td>&nbsp;</td>
										<td>电话号码</td>
										<td>录入时间</td>
										<td>操作</td>
                                    </tr>
								</thead>
                                <tbody>
                                </tbody>
							</table>
                   	</div>
                </div>	
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->
	<script>
	$("#del_phone").on('click',function(event){
		document.getElementById("phone").value="";
	});
	$("#chongzhi").on('click',function(event){
		document.getElementById("phone").value="";
		document.getElementById("type").value="";
		document.getElementById("template").value="";
		document.getElementById("content").value="";
	});
	function _init_template(type_id,template_id,select_type_id,select_template_id,base_url){
		$('#'+type_id).change(function(){
			template_option(type_id,template_id,select_template_id,base_url);
			document.getElementById("content").value="";
		});
		$('#'+template_id).change(function(){
			show_content(template_id,base_url);
		});
		$.ajax( {
	        url:base_url+'admin/message/type',
	        data:{},
	        type:'post',
	        cache:false,
	        dataType:'json',    
	        success:function(data) {
	        	var type = document.getElementById(type_id);
	        	type.options.length = 1;
	        	for(var i=0; i<data.type.length; i++)
				{
	        		var len = type.length;
	        		type.options[len] = new Option(data.type[i].name, data.type[i].id);
					if (type.options[len].value == select_type_id)
					{
						type.options[len].selected = true;
					}
				}
	        	template_option(type_id,template_id,select_template_id,base_url);
	        },
	        error : function() {       
	            alert("error");
	        }
		});
	}
	function template_option(type_id,template_id,select_template_id,base_url){
		$.ajax( {
	        url:base_url+'admin/message/template',
	        data:{type_id:$('#'+type_id).val()},
	        type:'post',
	        cache:false,
	        dataType:'json',    
	        success:function(data) {
	        	var template = document.getElementById(template_id);
	        	template.options.length = 1;
	        	for(var i=0; i<data.template.length; i++)
				{
	        		var len = template.length;
	        		template.options[len] = new Option(data.template[i].name, data.template[i].id);
					if (template.options[len].value == select_template_id)
					{
						template.options[len].selected = true;
					}
				}
	        	
	        },
	        error : function() {       
	            alert("error");
	        }
		});
	}
	function show_content(template_id,base_url){
		$.ajax( {
	        url:base_url+'admin/message/content',
	        data:{template_id:$('#'+template_id).val()},
	        type:'post',
	        cache:false,
	        dataType:'json',    
	        success:function(data) {
	        	$('#content').val(data.data.content);
	        },
	        error : function() {       
	            alert("error");
	        }
		});
	}
    var wait_table;
	
	function make_wait_list(){
		wait_table = $('#wait_tab').DataTable( {
			"processing": true, //Feature control the processing indicator.
	        "serverSide": true, //Feature control DataTables' server-side processing mode.
	        "ordering": false,
	        "lengthChange": false,
	        "language": {
				"zeroRecords": "没有找到记录",
				"info": "共_TOTAL_条记录",
				"infoEmpty": "共_TOTAL_条记录",
				"paginate": {
		            "first": "首页",
		            "previous": "上一页",
		            "next": "下一页",
		            "last": "末页"
		        },
			},
			"searching": false,
	        "ajax": {
	        		"url": "<?php echo base_url().'admin/message/get_wait_list'?>",
	                "type": "POST"
	        },
	    } );
	}
	function reload_wait_table()
	{
		wait_table.ajax.reload(null,false); //reload datatable ajax 
	}
	$("#add_wait").on('click',function(event){
		if($('#phone').val()==""){
			alert('请填写正确的手机号码');
		}else{
			$.ajax( {
		        url:'<?php echo base_url().'admin/message/add_wait'?>',
		        data:{phone:$('#phone').val().replace('\n',',')},
		        type:'post',
		        cache:false,
		        dataType:'json',    
		        success:function(data) {
			        if(data.code == 200){
			            reload_wait_table();
			        }
		        }
			});
		}
	});
	function delete_wait(id){
		if(confirm('确定要删除此条待发送记录?'))
	    {
	        // ajax delete data to database
	        $.ajax({
	            url : "<?php echo base_url().'admin/message/del_wait/'?>"+id,
	            type: "POST",
	            dataType: "JSON",
	            success: function(data)
	            {
	            	if(data.code == 200){
	            		reload_wait_table();
		            }
	            }
	        });
	    }
	}
	$("#del_all").on('click',function(event){
		if(confirm('确定要删除所有待发送记录?'))
	    {
	        // ajax delete data to database
	        $.ajax({
	            url : "<?php echo base_url().'admin/message/del_all/'?>",
	            type: "POST",
	            dataType: "JSON",
	            success: function(data)
	            {
	            	if(data.code == 200){
	            		reload_wait_table();
		            }
	            }
	        });
	    }
	});
	function send(){
		var content = $('#content').val();
		var temp = $('#template').val();
		if(content == ''&&temp == ''){
			alert('请选择正确的模板');
		}else{
			showLoading('发送中');
    		$.ajax({
                url : "<?php echo base_url().'admin/message/send'?>",
                type: "POST",
                data:{content:content,temp:temp},
                dataType: "JSON",
                success: function(data)
                {
                	if(data.code == 200){
                    	alert('短信已发送，请在发送记录中查看是否发送成功');
                	}else if(data.code == 300){
                		alert('请确认已将收件人添加至待发送列表');
                	}else{
                		alert('短信发送失败');
                	}
               	 hideLoading();
                }
            });
           
		}
	}
	</script>